<template>
  <div class="knowledge-base">
    <el-row type="flex" justify="space-between" align="middle">
    <el-col :span="6">
        <el-button type="primary" @click="createKnowledgeBase">创建知识库</el-button>
    </el-col>
    <el-col :span="8">
        <el-select v-model="selectedCategory" placeholder="全部">
        <el-option label="全部" value="all"></el-option>
        <el-option label="通用型" value="general"></el-option>
        <el-option label="Web站点" value="web"></el-option>
        </el-select>
    </el-col>
    <el-col :span="8">
        <el-input placeholder="按名称搜索" v-model="searchName" @keyup.enter="searchByName"></el-input>
    </el-col>
    </el-row>

    <el-row type="flex" justify="space-between" class="knowledge-cards">
    <el-col :span="8" v-for="(item, index) in knowledgeBases" :key="index">
        <div class="knowledge-card">
        <img :src="item.icon" alt="" class="knowledge-icon">
        <div class="knowledge-title">{{ item.title }}</div>
        <div class="knowledge-description">{{ item.description }}</div>
        <div class="knowledge-stats">
            <span>{{ item.documentCount }} 文档数</span>
            <span>{{ item.characterCount }} 字符</span>
            <span>{{ item.applicationCount }} 关联应用</span>
        </div>
        <div class="knowledge-type">{{ item.type }}</div>
        </div>
    </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: 'all',
      searchName: '',
      knowledgeBases: [
        {
          icon: 'https://example.com/icon1.png',
          title: '测试多文档上传',
          description: '测试多文档上传',
          documentCount: 3,
          characterCount: '5.9k',
          applicationCount: 0,
          type: '通用型'
        },
        {
          icon: 'https://example.com/icon2.png',
          title: 'MaxKB站点',
          description: 'MaxKB站点',
          documentCount: 1,
          characterCount: 0,
          applicationCount: 0,
          type: 'web 站点'
        },
        {
          icon: 'https://example.com/icon3.png',
          title: '赛力斯产品知识库',
          description: '赛力斯产品知识库',
          documentCount: 3,
          characterCount: '6.0k',
          applicationCount: 2,
          type: '通用型'
        }
      ]
    };
  },
  methods: {
    createKnowledgeBase() {
      // Logic to create a new knowledge base
      console.log('Create Knowledge Base');
    },
    searchByName() {
      // Logic to search by name
      console.log('Search by Name:', this.searchName);
    }
  }
};
</script>

<style scoped>
.knowledge-base {
  padding: 20px;
}

.knowledge-cards {
  margin-top: 20px;
}

.knowledge-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.knowledge-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: middle;
}

.knowledge-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.knowledge-description {
  color: #666;
  margin-bottom: 10px;
}

.knowledge-stats span {
  margin-right: 10px;
  color: #666;
}

.knowledge-type {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e6f7ff;
  color: #333;
  border-radius: 4px;
  margin-top: 10px;
}
</style>